<script setup lang="ts">
import { reactive } from 'vue'

const form = reactive({
  creator: '', // 创建人
  modifier: '', // 修改人
  updateTimeRange: [], // 更新时间范围 [start, end]
  status: '', // 生效状态
  effectiveTimeRange: [], // 生效时间范围
  expiredTimeRange: [], // 失效时间范围
})

// 搜索方法
const handleSearch = () => {
  console.log('搜索条件:', { ...form })
  // 调用API或触发查询逻辑
}

// 重置方法
const handleReset = () => {
  // 重置所有字段为初始值
  form.creator = ''
  form.modifier = ''
  form.updateTimeRange = []
  form.status = ''
  form.effectiveTimeRange = []
  form.expiredTimeRange = []
}
</script>

<template>
  <el-form :model="form" label-width="auto" style="max-width: 600px">
    <!-- 创建人 -->
    <el-form-item label="创建人：">
      <el-select v-model="form.creator" placeholder="全部" clearable>
        <el-option label="全部" value="" />
        <el-option label="张三" value="zhangsan" />
        <el-option label="李四" value="lisi" />
        <el-option label="王五" value="wangwu" />
      </el-select>
    </el-form-item>

    <!-- 修改人 -->
    <el-form-item label="修改人：">
      <el-select v-model="form.modifier" placeholder="全部" clearable>
        <el-option label="全部" value="" />
        <el-option label="张三" value="zhangsan" />
        <el-option label="李四" value="lisi" />
        <el-option label="王五" value="wangwu" />
      </el-select>
    </el-form-item>

    <!-- 更新时间 -->
    <el-form-item label="更新时间：">
      <el-date-picker
        v-model="form.updateTimeRange"
        type="daterange"
        range-separator="~"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
        clearable
      />
    </el-form-item>

    <!-- 生效状态 -->
    <el-form-item label="生效状态：">
      <el-select v-model="form.status" placeholder="全部" clearable>
        <el-option label="全部" value="" />
        <el-option label="生效" value="active" />
        <el-option label="失效" value="inactive" />
      </el-select>
    </el-form-item>

    <!-- 生效时间 -->
    <el-form-item label="生效时间：">
      <el-date-picker
        v-model="form.effectiveTimeRange"
        type="daterange"
        range-separator="~"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
        clearable
      />
    </el-form-item>

    <!-- 失效时间 -->
    <el-form-item label="失效时间：">
      <el-date-picker
        v-model="form.expiredTimeRange"
        type="daterange"
        range-separator="~"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
        clearable
      />
    </el-form-item>

    <!-- 按钮 -->
    <el-form-item label=" ">
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>
